<template lang="html">
  <div class="login-wrapper">
    <div class="login-box">
      <div class="login-row">
        <label for="username">用户名</label>
        <input id="username" type="text" name="username" v-model="username">
      </div>
      <div class="login-row">
        <label for="password">密码</label>
        <input id="password" type="password" name="password" v-model="password">
      </div>
      <div class="checkbox-row">
        <div class="checkbox-item">
          <input id="remember" type="checkbox" name="remember" v-model="remember">
          <label for="remember">记住密码</label>
        </div>
        <div class="checkbox-item">
          <input id="auto" type="checkbox" name="auto" v-model="auto">
          <label for="auto">自动登录</label></div>
      </div>
      <div class="login-row color-red" v-if="show">
        请输入正确的账号和密码
      </div>
    </div>
    <a class="login-btn" href="javascript:void(0);" @click="login">登录</a>
  </div>
</template>
<script>
export default {
  name: "Login",
  data() {
    return {
      username: '',
      password: '',
      remember: false,
      auto: false,
      show: false
    }
  },
  methods: {
    login() {
      this.$router.push({ name: 'Home' })
    }
  }
}
</script>
<style lang="less" scoped>
  @import '../assets/less/default.less';
  .color-red {
    color: @red!important;
  }
  .login-wrapper {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: lighten(@blue, 40%);
  }
  .login-box {
    width: 90%;
    .login-row {
      font-size: .3rem;
      line-height: .8rem;
      margin-bottom: .2rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: @blue;
      label {
        width: 20%;
        margin-right: 5%;
        text-align: left;
      }
      input {
        padding: 0 .1rem;
        width: 75%;
        height: .6rem;
        font-size: .3rem;
        border: 1px solid @grey;
        border-radius: 5px;
      }
    }
    .checkbox-row {
      font-size: .25rem;
      line-height: 1rem;
      margin-bottom: .2rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: @blue;
      .checkbox-item {
      }
      input {
        width: .35rem;
        height: .35rem;
        vertical-align: middle;
      }
    }
  }
  .login-btn {
    width: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: @blue;
    color: @white;
    border-radius: .8rem;
    font-size: .3rem;
    line-height: .8rem;
  }
</style>
